<template>
  <div id="centerRight1">
    <div class="bg-color-black2">
      <div class="cr-tit">
        <a-icon type="exclamation-circle" class="text-icon"></a-icon>
        <span class="text">{{ title }}</span>
      </div>
      <div class="body-box">
        <dv-scroll-board class="dv-scr-board" :config="config" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      config: {},
    }
  },
  watch: {
    sumNotResponse: {
      handler() {
        this.inint()
      },
      deep: true,
      immediate: true,
    },
  },
  props: {
    title: {
      type: String,
      default: '',
    },
    sumNotResponse: {
      type: Array,
      default: function() {
        return []
      },
    },
  },
  mounted() {},
  methods: {
    inint() {
      this.config = {
        header: ['机台', '车间', '工序'],
        headerHeight: 18,
        data: this.sumNotResponse,
        headerBGC: '#25b6e2',
        oddRowBGC: '#06144f',
        evenRowBGC: '#15235c',
        index: true,
        columnWidth: [70, 150, 120, 130],
        align: ['left'],
        waitTime: '5000',
        rowNum: 8,
      }
    },
  },
}
</script>

<style lang="less" scoped>
#centerRight1 {
  height: 37vh;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
  // .bg-color-black2 {
  //   height: 100%;
  //   border-radius: 10px;
  // }
  .cr-tit {
    text-align: left;
    padding: 5px 10px;
  }
  .text-icon {
    font-size: 1.5rem;
    color: #25b6e2;
    padding-right: 10px;
  }
  .text {
    color: #25b6e2;
    font-size: 14px;
    letter-spacing: 1px;
  }
  .body-box {
    overflow: hidden;
    .dv-scr-board {
      width: 100%;
      height: 30vh;
    }
  }
}
.dv-scroll-board .rows .ceil {
  font-size: 10px;
  padding: 2px 10px;
}
.dv-scroll-board .header .header-item {
  padding: 2px 10px;
  font-size: 12px;
}
</style>
